<template>
	<view>
		<view class="nav-bar">
			<view :style="{ height: statusBarHeight }" class="status-bar">
			</view>
			<view class="tab-bar">
				<input v-model="searchText" @input="changBut" :focus="true" type="text" placeholder="请输入需要查找的昵称" placeholder-class="iconfont icon-suosou" placeholder-style="color:#888;font-size:32rpx"></input>
				<view @tap="search" class="button" :class="[searchState?'button-true':'']">{{butText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			statusBarHeight: '',
			butText:'取消',
		    searchText:'',
			searchState:false
		};
	},
	methods: {
		...mapMutations(['setSearchText']),
		changBut(event){
			if(this.searchText){
				this.butText='搜索';
				this.searchState=true;
			}else{
				this.butText='取消';
				this.searchState=false;
			}
		},
		search(){
			if(this.searchState){
				this.setSearchText(this.searchText);
			}
			uni.navigateBack({
			    delta: 1
			});
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	}
};
</script>

<style scoped lang="less">
	.nav-bar{
		width: 100%;
		
		.status-bar {
			width: 100%;
			height: 20px;
		}
		
		.tab-bar{
			width: 100%;
			height: 44px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			input{
				width: 70%;
				height: 50rpx;
				margin-left: 40rpx;
				border-radius: 25rpx;
				background-color: #DDD;
				padding-left: 20rpx;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				color: #007AFF;
				font-size: 34rpx;
				text-align: center;
			}
			.icon-suosou::before{
				font-size: 36rpx;
				margin-right: 20rpx;
			}
			
			.button{
				margin-right: 40rpx;
				background-color: #DDD;
				padding: 6rpx 25rpx;
				font-size: 30rpx; 
				border-radius: 20rpx;
				color: #FFFFFF;
			}
			.button-true{
				background: linear-gradient(270deg, #FC80A4 0%, #FEB7BA 100%);
			}
		}
	}
	
</style>
